<template>
  <el-dialog
    :model-value="visible"
    :title="dialogTitle"
    width="600px"
    @update:model-value="$emit('update:visible', $event)"
    @close="handleClose"
  >
    <el-form
      :model="productionForm"
      :rules="productionRules"
      ref="productionFormRef"
      label-width="120px"
    >
      <el-form-item label="字段名称" prop="fieldName">
        <el-select
          v-model="productionForm.fieldName"
          placeholder="请选择"
          style="width: 100%"
          @change="handleFieldNameChange"
        >
          <el-option
            v-for="field in availableFields"
            :key="field.id"
            :label="field.fieldName"
            :value="field.fieldName"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="展示方式" prop="showType">
        <el-radio-group v-model="productionForm.showType" @change="handleShowTypeChange">
          <el-radio :label="1">表格展示</el-radio>
          <el-radio :label="2">
            <span class="radio-label">分组展示</span>
            <el-tooltip
              content="实际需求中若出现当前选择字段值不一致时，按照字段拆分生产加工单，若添加多个分组展示字段，将组合拆分生产加工单后，展示表格数据、计算展示字段。"
              placement="top"
            >
              <el-icon class="info-icon">
                <QuestionFilled />
              </el-icon>
            </el-tooltip>
          </el-radio>
          <el-radio :label="3">计算展示</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="productionForm.showType === 3" label="计算逻辑" prop="logicType">
        <div class="display-logic-container">
          <el-select v-model="productionForm.logicType" placeholder="请选择" style="width: 200px">
            <el-option label="统计" :value="1" />
            <el-option label="平均" :value="2" />
          </el-select>
          <span class="logic-tip">字段全部行后展示最终结果</span>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleSave">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { QuestionFilled } from '@element-plus/icons-vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  fieldList: {
    type: Array,
    default: () => []
  },
  productionFieldList: {
    type: Array,
    default: () => []
  },
  productionFieldData: {
    type: Object,
    default: null
  }
})

const emit = defineEmits(['update:visible', 'success'])

const productionFormRef = ref()
const dialogTitle = ref('添加字段')
const isEditMode = ref(false)
const editingProductionFieldId = ref(null)

const productionForm = reactive({
  fieldName: '',
  showType: 1,
  logicType: null
})

// 可用的字段列表（排除已使用的字段，编辑时排除自己）
const availableFields = computed(() => {
  if (!props.fieldList || props.fieldList.length === 0) {
    return []
  }

  // 获取已使用的字段名称
  const usedFieldNames = props.productionFieldList
    .filter((item) => {
      // 编辑时排除当前编辑的字段
      if (isEditMode.value && item.id === editingProductionFieldId.value) {
        return false
      }
      return true
    })
    .map((item) => item.fieldName)

  // 返回未使用的字段
  return props.fieldList.filter((field) => !usedFieldNames.includes(field.fieldName))
})

// 表单验证规则
const productionRules = {
  fieldName: [{ required: true, message: '请选择字段名称', trigger: 'change' }],
  showType: [{ required: true, message: '请选择展示方式', trigger: 'change' }],
  logicType: [
    {
      required: false,
      trigger: 'change',
      validator: (rule, value, callback) => {
        // 只有当展示方式为"计算展示"时，计算逻辑才是必填的
        if (productionForm.showType === 3) {
          if (!value || value === 0) {
            callback(new Error('请选择计算逻辑'))
          } else {
            callback()
          }
        } else {
          callback()
        }
      }
    }
  ]
}

// 监听 productionFieldData 变化，初始化编辑数据
watch(
  () => props.productionFieldData,
  (newData) => {
    if (newData && props.visible) {
      // 编辑模式
      dialogTitle.value = '编辑字段'
      isEditMode.value = true
      editingProductionFieldId.value = newData.id

      // 填充表单数据
      productionForm.fieldName = newData.fieldName || ''
      productionForm.showType = newData.showType || 1
      productionForm.logicType = newData.logicType || 1
    } else if (props.visible && !newData) {
      // 添加模式
      dialogTitle.value = '添加字段'
      isEditMode.value = false
      editingProductionFieldId.value = null
      resetForm()
    }
  },
  { immediate: true }
)

// 监听 visible 变化，关闭时重置表单
watch(
  () => props.visible,
  (newVal) => {
    if (!newVal) {
      resetForm()
    }
  }
)

// 重置表单
function resetForm() {
  productionForm.fieldName = ''
  productionForm.showType = 1
  productionForm.logicType = 1
  productionFormRef.value?.clearValidate()
}

// 关闭弹窗
function handleClose() {
  emit('update:visible', false)
}

// 处理字段名称变化
function handleFieldNameChange(value) {
  // 验证字段是否已被使用
  if (value) {
    const isUsed = props.productionFieldList.some((item) => {
      if (isEditMode.value && item.id === editingProductionFieldId.value) {
        return false // 编辑时排除自己
      }
      return item.fieldName === value
    })

    if (isUsed) {
      ElMessage.error('该字段已被使用，一个字段只能添加一次')
      productionForm.fieldName = ''
      return
    }
  }
}

// 处理展示方式变化
function handleShowTypeChange(value) {
  // 如果不是计算展示，清空计算逻辑
  if (value !== 3) {
    productionForm.logicType = 1
  }
}

// 保存
async function handleSave() {
  await productionFormRef.value?.validate()

  // 验证字段是否已被使用（再次验证）
  const isUsed = props.productionFieldList.some((item) => {
    if (isEditMode.value && item.id === editingProductionFieldId.value) {
      return false // 编辑时排除自己
    }
    return item.fieldName === productionForm.fieldName
  })

  if (isUsed) {
    ElMessage.error('该字段已被使用，一个字段只能添加一次')
    return
  }

  // 验证计算逻辑
  if (productionForm.showType === 3 && !productionForm.logicType) {
    ElMessage.error('请选择计算逻辑')
    return
  }

  // 查找对应的字段id
  const field = props.fieldList.find((f) => f.fieldName === productionForm.fieldName)
  const fieldId = field ? field.id : ''

  // 构建数据
  const productionFieldData = {
    id: fieldId, // id存储的是字段id
    fieldName: productionForm.fieldName,
    showType: productionForm.showType,
    logicType: productionForm.showType === 3 ? productionForm.logicType : null
  }

  // 如果是编辑模式，保留原有的id（字段id）
  if (isEditMode.value && props.productionFieldData && props.productionFieldData.id) {
    productionFieldData.id = props.productionFieldData.id
  }

  // 触发成功事件
  emit('success', productionFieldData, isEditMode.value)
  handleClose()
}
</script>

<style lang="scss" scoped>
.display-logic-container {
  display: flex;
  align-items: center;
  gap: 12px;

  .logic-tip {
    color: #909399;
    font-size: 14px;
  }
}

.radio-label {
  margin-right: 4px;
}

.info-icon {
  color: #909399;
  font-size: 18px;
  cursor: pointer;
  vertical-align: sub;
  margin-left: 4px;

  &:hover {
    color: #409eff;
  }
}
</style>
